<template>
  <div class="app-container">
    <h2 class="con-title">仓库信息设置</h2>
    <div class="content">
      <el-form :model="whForm" status-icon :rules="whRules" ref="whForm" label-width="120px" class="wh-form" size="mini">
        <el-form-item label="仓库名称" prop="supplierWarehouse">
          <strong>{{whForm.supplierWarehouse}}</strong>
        </el-form-item>
        <el-form-item label="仓库地址" prop="areaSelect">
          <el-cascader :options="options" v-model="whForm.areaSelect" @change="handleChange" placeholder="请选择仓库地址">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input type="textarea" v-model="whForm.address"></el-input>
        </el-form-item>
        <el-form-item label="配货时间说明" prop="expressDeclare">
          <el-input type="text" v-model="whForm.expressDeclare" auto-complete="off"></el-input>
          <span class="sui-muted" style="margin-left:10px">如：周一至周五 9:00~18:00</span>
        </el-form-item>
        <el-form-item label="发货承诺" prop="sendPromise">
          <el-select :disabled="promiseDisabled" v-model="whForm.sendPromise" placeholder="请选择发货承诺">
            <el-option label="24小时发货" :value="24"></el-option>
            <el-option label="48小时发货" :value="48"></el-option>
          </el-select>
          <span class="sui-muted sui-text-error" style="margin-left:10px">注意：发货承诺设置成功后不可更改</span>
          <!--<el-radio-group v-model="whForm.sendPromise">
            <el-radio :label="24">24小时发货</el-radio>
            <el-radio :label="48">48小时发货</el-radio>
          </el-radio-group>-->
        </el-form-item>

        <el-form-item label="截单时间" prop="endTime">
          <el-time-picker format='HH:mm' value-format="HH:mm" v-model="whForm.endTime" :editable="false" :picker-options="pickerOption"
            placeholder="截单时间">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="退货说明" prop="returnExplain">
          <el-input type="textarea" v-model="whForm.returnExplain"></el-input>
        </el-form-item>
        <el-form-item label="退货规则" prop="rerurnType">
          <el-radio-group v-model="whForm.rerurnType">
            <el-radio label="1">支持零散退货</el-radio>
            <el-radio label="2">不支持零散退货</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="退货收件人" prop="returnAddressee">
          <el-input type="text" v-model="whForm.returnAddressee" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="退货地址" prop="returnAddress">
          <el-input type="text" v-model="whForm.returnAddress" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="returnPhone">
          <el-input type="text" v-model="whForm.returnPhone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="returnZipCode">
          <el-input type="text" v-model="whForm.returnZipCode" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="物流说明" prop="logisticsName">
          <el-input type="textarea" v-model="whForm.logisticsName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('whForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
  import {
    getWarehouseInfo,
    editWarehouseInfo
  } from '@/api/user'
  import validate from '@/utils/el-validate'
  import {
    regionData,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  export default {
    data() {
      return {
        promiseDisabled: false,
        pickerOption: {
          selectableRange: '00:00:00 - 23:59:00',
          format: 'HH:mm'
        },
        options: regionData,
        whForm: {
          areaSelect: [], // 验证的字段一定要在form下
          supplierWarehouse: '',
          endTime: '',
          provinceName: '',
          cityName: '',
          areaName: '',
          address: '',
          sendPromise: '',
          rerurnType: 1
        },
        whRules: {
          supplierWarehouse: [{
            required: true,
            message: '请输入仓库名称',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }],

          areaSelect: [{
            type: 'array',
            required: true,
            message: '请选择仓库地址',
            trigger: 'trigger'
          }],
          address: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }],
          expressDeclare: [{
            required: true,
            message: '请输入配货时间说明',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请输入截单时间',
            trigger: 'blur'
          }],
          returnExplain: [{
            required: true,
            message: '请输入退货说明',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }],
          rerurnType: [{
            required: true,
            message: '请选择退货规则',
            trigger: 'change'
          }],
          sendPromise: [{
            required: true,
            message: '请选择发货承诺',
            trigger: 'change'
          }],
          returnAddressee: [{
            required: true,
            message: '请输入退货收件人',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }],
          returnAddress: [{
            required: true,
            message: '请输入完整的退货地址',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }],
          returnPhone: [{
            required: true,
            message: '请输入联系方式',
            trigger: 'blur'
          }, {
            trigger: 'blur',
            validator: validate('telephone', '输入手机号或座机，区号、分机号用‘-’分隔。')
          }],
          returnZipCode: [{
            required: true,
            message: '请输入邮编',
            trigger: 'blur'
          }, {
            trigger: 'blur',
            validator: validate('zipcode', '邮编格式不正确')
          }],
          logisticsName: [{
            required: true,
            message: '请输入物流说明',
            trigger: 'blur'
          }, {
            max: 100,
            message: '不得超过一百个字',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      handleChange(value) {
        // 地区代码转成汉字
        this.whForm.provinceName = CodeToText[value[0]]
        this.whForm.cityName = CodeToText[value[1]]
        this.whForm.areaName = CodeToText[value[2]]
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const formData = {
              // supplierWarehouse: encodeURI(this.whForm.supplierWarehouse),
              endTime: this.whForm.endTime,
              provinceName: encodeURI(this.whForm.provinceName),
              cityName: encodeURI(this.whForm.cityName),
              areaName: encodeURI(this.whForm.areaName),
              address: encodeURI(this.whForm.address),
              expressDeclare: encodeURI(this.whForm.expressDeclare),
              sendPromise: this.whForm.sendPromise,
              rerurnType: this.whForm.rerurnType,
              returnExplain: encodeURI(this.whForm.returnExplain),
              returnAddress: encodeURI(this.whForm.returnAddress),
              returnAddressee: encodeURI(this.whForm.returnAddressee),
              returnPhone: this.whForm.returnPhone,
              returnZipCode: this.whForm.returnZipCode,
              logisticsName: encodeURI(this.whForm.logisticsName)
            }
            // 编辑仓库信息
            editWarehouseInfo(formData).then(res => {
              this.$message.success('信息更新成功！')
            }).catch(err => {
              this.$message.error(err.info)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      init() {
        // 获取供应商信息
        getWarehouseInfo()
          .then(res => {
            this.whForm = res.data.admSupplier
            if (this.whForm.provinceName) {
              // 获取省市区转成code
              const provinceName = this.whForm.provinceName
              const cityName = this.whForm.cityName
              const areaName = this.whForm.areaName
              if (this.whForm.provinceName.length === 2) {
                this.whForm.provinceName = this.whForm.provinceName + '市'
                this.whForm.cityName = '市辖区'
              }
              const areaSelect = [
                TextToCode[provinceName].code,
                TextToCode[provinceName][cityName].code,
                TextToCode[provinceName][cityName][areaName].code
              ]
              this.whForm.areaSelect = areaSelect
              // 将地址转换
            }
            if (this.whForm.sendPromise !== undefined) {
              this.promiseDisabled = true
            }
          })
      }
    },
    mounted() {
      this.init()
    }
  }

</script>
<style rel="stylesheet/scss" lang="scss">
  @import 'src/assets/css/sui.scss';

  .wh-form {
    .el-input,
    .el-textarea {
      width: 320px
    }
  }

  .code-img {
    height: 100%;
    vertical-align: middle;
    float: right;
  }

</style>
